CSS - 伪类

CSS 伪类 :checked 表示任何复选框（<input type="checkbox">）、单选（<input type="radio">）或选项（<select> 中的 <option>）元素，该元素要么被选中，要么切换到打开状态。 

可以通过选中/选择或取消选中/取消选择元素来启用或禁用此状态。

语法

:checked {
   /* ... */
}

CSS :checked 示例

这是单选按钮的 :checked 伪类的示例。当选择或选中单选按钮时，框阴影样式将应用于所选单选按钮周围。

<html>
<head>
<style>
   div {
      margin: 10px;
      padding: 10px;
      font-size: 20px;
      border: 3px solid black;
      width: 200px;
      height: 45px;
      box-sizing: border-box;
   }

   input[type="radio"]:checked {
      box-shadow: 0 0 0 8px red;
   }
</style>
</head>
<body>
   <h2>:checked 例子 - radio</h2>
   <div>
      <input type="radio" name="my-input" id="yes">
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no">
      <label for="no">No</label>
   </div>
</body>
</html>

这里是复选框的 :checked 伪类的示例。当复选框被选中时，框阴影样式以及颜色和边框样式将应用于复选框及其标签。

<html>
<head>
<style>
   div {
      margin: 10px;
      font-size: 20px;
   }

   input:checked + label {
      color: royalblue;
      border: 3px solid red;
      padding: 10px;
   }

   input[type="checkbox"]:checked {
      box-shadow: 0 0 0 6px pink;
   }
</style>
</head>
<body>
   <h2>:checked 例子 - checkbox</h2>
   <div>
      <p>选中并取消选中我以查看更改</p>
      <input type="checkbox" name="my-checkbox" id="opt-in">
      <label for="opt-in">Check!</label>
   </div>
</body>
</html>

这里是选项的 :checked 伪类的示例。当从列表中选择一个选项时，背景颜色变为浅黄色，字体颜色变为红色。

<html>
<head>
<style>
   select {
      margin: 10px;
      font-size: 20px;
   }

   option:checked {
      background-color: lightyellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>:checked 例子- option</h2>
   <div>
   <h3>喜欢的水果:</h3>
      <select name="sample-select" id="icecream-flav">
         <option value="opt3">香蕉</option>
         <option value="opt2">草莓</option>
         <option value="opt3">火龙果</option>
         <option value="opt3">苹果</option>
         <option value="opt3">西瓜</option>
         <option value="opt1">哈密瓜</option>
      </select>
   </div>   
</body>
</html>